<template>
  <div class="work-mechanism">
    <div class="scroll-container">
      <div class="scroll-wrapper">
        <div class="work-item" v-for="item in displayList" :key="item.id">
          <div class="name">{{item.name}}</div>
          <div class="text">{{item.text}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "WorkMechanism",
  data(){
    return{
      list:[{id:1,name:'基础信息联采',text:'数据共享共建'},
        {id:2,name:'安全防患联治',text:'多方协同治理'},
        {id:3,name:'治安防范联巡',text:'联合巡逻防控'},
        {id:4,name:'矛盾纠纷联调',text:'多元化解机制'},
        {id:5,name:'重点人员联管',text:'动态管控帮扶'},
        {id:6,name:'宣传服务联动',text:'资源整合共享'},
        {id:7,name:'治安警情联处',text:'快速响应处置'},
        {id:8,name:'平安建设联创',text:'全民参与共建'},
      ]
    }
  },
  computed: {
    displayList() {
      // 复制两份数据以实现无缝滚动
      return [...this.list, ...this.list];
    }
  }
}
</script>

<style scoped lang="scss">
.work-mechanism{
  width: 100%;
  height: 100%;
  overflow: hidden;
  
  .scroll-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
  }

  .scroll-wrapper {
    width: 100%;
    position: absolute;
    animation: scrollAnimation 20s linear infinite;
    
    &:hover {
      animation-play-state: paused;
    }
  }

  .work-item{
    width: calc(50% - 5px);
    height: 60px;
    background: #06213b;
    border-radius: 10px;
    border: 1px solid #32b4ff;
    padding: 8px 10px;
    margin: 5px auto;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 5px;
    
    .name{
      color: #32b4ff;
      margin-bottom: 2px;
      font-size: 14px;
    }
    .text{
      color: white;
      font-size: 13px;
    }
  }
}

@keyframes scrollAnimation {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}
</style>
